<template>
  <div id="detailsBar">
    <div class="bar" ref="bar"></div>
  </div>
</template>

<script>
export default {
  props: {
    starXData: Array | Object,
    starYData: Array | Object,
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawbar();
  },

  methods: {
    drawbar() {
      let that = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart4 = that.$echarts.init(that.$refs.bar);
      let option = {
        // color: ["#2d85fe"],
        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#83bff6" },
          { offset: 0.5, color: "#188df0" },
          { offset: 1, color: "#188df0" },
        ]),
        grid: {
          top: "15%", // 组件离容器上侧的距离,百分比字符串或整型数字
          left: "0%", // 组件离容器左侧的距离,百分比字符串或整型数字
          right: "5%",
          bottom: "3%",
          containLabel: true, //grid 区域是否包含坐标轴的刻度标签，
        },
        xAxis: {
          type: "category",
          data: that.starXData,
          axisLabel: {
            interval: 0,
            rotate: 20,
            fontSize: 12,
            margin:15,
          },
          axisLine: {
            lineStyle: {
              color: "#888",
            },
          },
        },
        yAxis: {
          show: false,
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#888",
            },
          },

          axisLabel: {
            formatter: function (value) {
              return value + "%";
            },
          },

          // max: 1,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#e5e5e5",
            },
          },
        },
        series: [
          {
            // data: [0.5],
            data: that.starYData,
            type: "bar",
            barWidth: 20, //柱状宽度
            itemStyle: {
              emphasis: {
                barBorderRadius: [3, 3, 0, 0],
              },
              normal: {
                barBorderRadius: [3, 3, 0, 0],
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 10,
                  },
                  formatter: function (params) {
                    return params.value + "%";
                  },
                },
              },
              //   barBorderRadius: [5, 5, 0, 0], // （顺时针左上，右上，右下，左下）
            },
            // showBackground: true,
            // backgroundStyle: {
            //   color: "rgba(220, 220, 220, 0.8)",
            // },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart4.setOption(option);
      myChart4.setOption({
        graphic: {
          type: "image",
          bounding: "raw",
          top: "60%",
          left: "15%",
          style: {
            image:
              "",
            width: "147",
            height: "32",
          },
        },
      });
      window.addEventListener("resize", function () {
        myChart4.resize();
      });
      this.$once('hook:beforeDestroy', () => {
        this.$echarts.dispose(myChart4);
      });      
    },
  },
};
</script>
<style lang='less' scoped>
#detailsBar {
  width: 100%;
  height: 100%;
  .bar {
    width: 100%;
    height: 100%;
  }
}
</style>